<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../css/app.css" />
		<style type="text/css">
			.message {
				background-color: #fff;
				z-index: 99;
				box-shadow: 0px -5px 5px 0px rgba(150, 150, 150, .2);
			}
			
			.message.bottom {
				position: fixed;
				padding: 5px;
				bottom: 0;
				left: 0px;
				right: 0px;
			}
			.message.top {
				position: fixed;
				padding: 5px;
				top: 0;
				left: 0px;
				right: 0px;
			}
			
			.radio_inline{  
				display: inline-block;  
				width: 65%;  
			}  
			.radio_inline label{  
				width: 45%;  
				padding-left: 30px;  
				padding-right: 20px;  
			}  
			.radio_inline input[type=radio]{  
				width: 15%;               
				right: auto;  
			}  
			
		</style>
	</head>

	<body class="body-class">
		<div id="mainDiv">
				<div class="message top">
					<input id="boxCodeInput" type="text" class="mui-input-clear" placeholder="托盘条码">
				</div>
				<div  style="height:5rem" >
				</div>
				<div class="mui-content" id="mui-content-id">
				</div>
			    <div style="height:5rem" ></div>
		</div>
		
	
		<div class="message bottom">
			<div id="addDiv" class="mui-card  " style="display:none" >
		 
				<ul class="mui-table-view">
					<li class="mui-table-view-cell mui-collapse">
						<a class="mui-navigate-right" href="#" >物料</a>
						<div class="mui-collapse-content">
							<input type="text" id="itemName" placeholder="物料">
							
							  
							<form class="mui-input-group">
								<div id="itemOption"> 
										
										 
								 </div>
							 </form>
						</div>
					</li>
					
					<!-- <li class="mui-table-view-cell mui-collapse">
						<a class="mui-navigate-right" href="#">单位</a>
						<form class="mui-input-group">
							<div class="mui-collapse-content" id="unitsOption"> 
							</div>
						</form>
					</li> -->
				<!-- <li class="mui-table-view-cell mui-collapse">
					<a class="mui-navigate-right" href="#">批次</a>
					<div class="mui-collapse-content">
						<p id="itemLabel"></p>
						<input type="text" id="batchNo" placeholder="批次" class="mui-navigate-right">
						<p  id='unitsLabel'></p>
					</div>
				</li> -->
					<li class="mui-table-view-cell mui-collapse">
						<a class="mui-navigate-right" href="#">预览</a>
						<div class="mui-collapse-content">
							<p id="itemLabel"></p>
							<input type="text" id="dbCount" placeholder="数量" class="mui-navigate-right">
							<p  id='unitsLabel'></p>
						</div>
					</li>
				</ul>
		 
				
				
			 
				
			</div>
			<button id="saveButton" type="button" class="mui-btn mui-btn-block mui-btn-primary">新增</button>
		</div>
		<script src="../js/mui.js"></script>
	</body>
<script type="text/javascript" charset="utf-8">
	var info = document.getElementById("info");
	
	var addCoreStockDetail={status:8};
 
	 document.getElementById('saveButton').addEventListener('tap', function() {
		if( this.innerHTML=="新增"){
			document.getElementById("addDiv").style.display="block"
		    document.getElementById('saveButton').innerHTML="保存"
		}else{
			addCoreStockDetail.countDb =	document.getElementById("dbCount").value
			
				addCoreStockDetail.batchNo ="1"
			if(!addCoreStockDetail.pid){
				
				 mui.toast("托盘未找到");
				 return
			}
			if(!addCoreStockDetail.itemId){
				
				 mui.toast("请选择物料");
				 return
			}
			mui.post("pk/pkMore", addCoreStockDetail, function(response) {
			   
				loadData();
				document.getElementById("addDiv").style.display="none"
				document.getElementById('saveButton').innerHTML="新增"
			}, "json");
			
		}
		
	 }, false);
	 
	 document.getElementById('mainDiv').addEventListener('tap', function(e) {
			document.getElementById("addDiv").style.display="none"
		 	 document.getElementById('saveButton').innerHTML="新增"
	 }, false);
	 
	 
	 function loadData(){
		 var boxCode=	document.getElementById("boxCodeInput").value;
		 if(boxCode.length<=5){
			 return;
		 }
		 mui.getJSON("pda/getStock/"+boxCode, "", function(response) {
		    document.body.querySelector('#mui-content-id').innerHTML=""
		 	if (response.code != "200") {
		 		mui.confirm(response.msg)
		 		return;
		 	} 
		 	addCoreStockDetail.pid=response.data.main.id;
		 	var list= response.data.detList;
		 	for(var i=0;i<list.length;i++){
				var d=list[i];
		 		addDetail(d.id, d.itemCode,d.countDb,d.status)
		 	}
		 	
		 			 
		 }, "json");
		 mui.toast(boxCode);
		 
	 }
	 
	 function addDetail(id, va,count,status){
		 var info="";
		 if(status==6){
			 info="盘亏"
			 return;
		 }else if(status==8){
			 info="盘盈"
		 }
		 var data = '<div class="mui-card-content mui-card-content-inner"><div style="display:inline;">'+va+'</div><span   style="display:inline;float:right" >'+info+'</span></div>'
		 +'<div class="mui-card-footer">'+count+'</div>'
		 var div = document.createElement('div');
		 div.className = "mui-card";
		 div.innerHTML = data
		 div.csdId=id;
		 var content = document.body.querySelector('#mui-content-id');
		 content.appendChild(div)
	 }
	 
	 mui.get("pda/getUnits", "", function(res) {
	 	if (res.code != "200") {
	 		mui.confirm(res.msg)
	 		return;
	 	} 
	 	 
	 	items= res.data;
	 	var html="";
	 	for(var i=0;i<items.length;i++){ 
	 		html+='<div class="mui-input-row mui-radio"> <label>'+items[i].label+'</label> <input name="radio2" type="radio" value="'+items[i].value+'"></div>'
	 	}
	    // document.getElementById("unitsOption").innerHTML=html
	 	 
	 }, "json");
	document.getElementById('itemOption').addEventListener('tap',function(){
		setTimeout(function(){
			
			var ch=document.getElementsByName("radio1");
			for (var i = 0; i < ch.length; i++) {
				var r = ch[i];
				if (r.checked) {
					addCoreStockDetail.itemId=r.value
					document.getElementById("itemLabel").innerHTML=	r.previousElementSibling.innerHTML
				} 
			} 
		},1) 	
	});

	// document.getElementById('unitsOption').addEventListener('tap',function(){
	// 	setTimeout(function(){
			
	// 		var ch=document.getElementsByName("radio2");
	// 		for (var i = 0; i < ch.length; i++) {
	// 			var r = ch[i];
	// 			if (r.checked) {
	// 				addCoreStockDetail.unit=r.value;
	// 				document.getElementById("unitsLabel").innerHTML=	r.previousElementSibling.innerHTML
	// 			} 
	// 		} 
	// 	},1) 	
	// });



	(function($) {
		document.getElementById("boxCodeInput").addEventListener('input', function(event) {
				loadData();
		}, false);
		 document.getElementById("itemName").addEventListener('input', function(event) {
				mui.get("pda/getItem/"+this.value, "", function(res) {
					if (res.code != "200") {
						mui.confirm(res.msg)
						return;
					} 
					 
					items= res.data;
					var html="";
					for(var i=0;i<items.length;i++){ 
						html+='<div class="mui-input-row mui-radio"> <label>'+items[i].code+items[i].name+items[i].gg+'</label> <input name="radio1" type="radio" value="'+items[i].id+'"></div>'
					}
						 document.getElementById("itemOption").innerHTML=html
					 
				}, "json");
		 }, false);
		var btnArray = ['确认', '取消'];
		$('#mui-content-id').on('swiperight', '.mui-card', function(event) {
			var elem = this;
			mui.confirm('确认删除该条记录？', 'Hello MUI', btnArray, function(e) {
				if (e.index == 0) {
					mui.post("pk/pkLess", {id:elem.csdId,countDb: 0}, function(response) {
					   document.body.querySelector('#mui-content-id').innerHTML=""
						if (response.code != "200") {
							mui.confirm(response.msg)
							retun;
						} 
						loadData();
								 
					}, "json");
				} else {
					setTimeout(function() {
						$.swipeoutClose(elem);
					}, 0);
				}
			});
		});
		
		var tapCard=""
		mui('#mui-content-id').on('tap', '.mui-card', function(event) {
			tapCard=this;
			mui.prompt("实际数量", '数量', this.children[0].children[0].innerHTML, btnArray, function(e) {
				if (e.index == 0) { 
					mui.post("pk/pkLess", {id:tapCard.csdId,countDb: e.value}, function(response) {
					   document.body.querySelector('#mui-content-id').innerHTML=""
						if (response.code != "200") {
							mui.confirm(response.msg)
							retun;
						} 
						
						 loadData();
								 
					}, "json");
				} 
			})
			 
		});
	})(mui);
</script>
</html>